<template>
  <div class="wrapper">
    <!-- 数据 -->
    <div class="table-box">
      <i-table
        :table="tableConfig"
        :tableData="tableData" 
        :page-bean="pageBean"
        @pageChange="pageChange"
      >
        <template slot="searchBox">
          <div class="topsearch">
            <div class="btns">
              <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="add">添加</el-button>
            </div>
            <div class="search">
              <el-input
                placeholder="请输入岗位名称搜索"
                prefix-icon="el-icon-search"
                class="search-inp"
                v-model="searchValue.keyword"
                size="small"
                clearable
              >
              </el-input>
              <el-button type="primary" size="small" @click="search">搜索</el-button>
            </div>
          </div>
        </template>
        <template slot="roleList" slot-scope="props">
          <el-tag v-for="(item,index) in props.obj.row.roleList" :key="index" size="small">{{item.roleName}}</el-tag>
        </template>
        <template slot="lockFlag" slot-scope="props">
          <el-switch
            v-model="props.obj.row.lockFlag"
            active-value="0"
            inactive-value="1"
            @change="handleChangeLock(props.obj.row.roleId,props.obj.row.lockFlag)"
          >
          </el-switch>
        </template>
        <template slot="op" slot-scope="props">
          <el-button type="text" @click="edit(props.obj.row.roleId)">设置权限</el-button>
          <el-button type="text" @click="del(props.obj.row.roleId)" icon="el-icon-delete">删除</el-button>
        </template>
      </i-table>
    </div>

    <el-dialog title="添加岗位" append-to-body :visible.sync="dialogVisible" width="550px">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="add-form">
        <el-form-item label="岗位名称" prop="roleName">
          <el-input v-model="form.roleName" placeholder="请输入岗位名称"></el-input>
        </el-form-item>
        <el-form-item label="岗位描述" prop="roleDesc">
          <el-input v-model="form.roleDesc" placeholder="请输入岗位描述"></el-input>
        </el-form-item>
        <el-form-item label="岗位标识" prop="roleCode">
          <el-input v-model="form.roleCode" placeholder="请输入岗位标识"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm" :loading="btnLoading">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="岗位权限" append-to-body :visible.sync="dialogMenuVisible" width="750px">
      <el-tree
        :data="menuList"
        show-checkbox
        node-key="id"
        :default-expand-all="true"
        :render-content="renderContent"
        ref="tree"
        @check="getNode"
       >
      </el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogMenuVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitRoleMenu" :loading="btnLoading">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import iTable from "@/components/table/table";
import TreeSelect from '@/components/treeselect/index';
import { PageBean } from "@/utils/page-bean";
export default {
  components: { iTable ,TreeSelect},
  data() {
    return {
      // 表格配置
      tableConfig: {},
      tableData: [],
      pageBean: new PageBean(10, 1, 0),
      searchValue:{
        keyword:'',
        current:1,
        size:10
      },
      //添加
      dialogVisible:false,
      form:{
        roleName:'',
        roleDesc:'',
        roleCode:'',
        modelId:1,
      },
      btnLoading:false,
      rules:{
        roleName: [{ required: true, message: '请输入岗位名称', trigger: 'blur' }],
      },
      //组织
      menuList:[],
      dialogMenuVisible:false,
      editId:'',
      checkedKeys:[]
    };
  },
  created(){
    this.getMenuList()
    this.initTable()
    this.refreshTableData()
  },
  methods: {
    //获取角色列表
    getMenuList(){
      this.$api.getMenuList().then(res => {
        this.menuList = res.data
      })
    },
    search(){
      this.searchValue.current = 1
      this.pageBean.pageIndex = 1
      this.refreshTableData();
    },
    // 初始化表格
    initTable() {
      this.tableConfig = {
        loading: false,
        hasSelect: false,
        hasIndex: true,
        hasOperation: false,
        hasSearch: true,
        hasPage: true,
        tr: [
          {
            label: "岗位名称",
            minWidth: "150",
            prop: "roleName",
          },
          {
            label: "岗位描述",
            minWidth: "200",
            prop: "roleDesc",
          },
          {
            label: "岗位标识",
            minWidth: "160",
            prop: "roleCode",
          },
          {
            label: "状态",
            minWidth: "100",
            prop: "lockFlag",
            show:"template"
          },
          {
            label: "操作",
            width: "160",
            prop: "op",
            show: "template",
          },
        ],
      };
    },
    //刷新表格数据
    refreshTableData(){
      this.tableConfig.loading = true;
      let data = JSON.parse(JSON.stringify(this.searchValue))
      this.$api.getRoleList(data).then(res => {
        this.tableData = res.data.records
        this.pageBean.Total = res.data.total
        this.tableConfig.loading = false;
      })
    },
    //分页
    pageChange(pageBean) {
      this.searchValue.current = pageBean.pageIndex;
      this.refreshTableData();
    },
    handleChangeLock(id,flag){
      this.$api.lockRole({
        roleId:id,
        lockFlag:flag
      }).then(res => {
        this.$nextTick(() => {
          this.refreshTableData();
        })
      })
    },
    renderContent(h, { node, data, store }) {
      let classname = "";
      if (!data.children) {
        classname = "especially";
      }
      return (
        <div class={classname}>
          {data.label}
        </div>
      );
    },
    changeTreeClass(){
      var classDomList = document.getElementsByClassName('especially')
      for (var i = 0; i < classDomList.length; i++) {
        classDomList[i].parentNode.style.cssText = 'float: left'
        classDomList[i].parentNode.className = 'el-tree-node__content option-wrapper'
        classDomList[i].parentNode.parentNode.parentNode.style.marginLeft = '30px'
 
      }
    },
    //添加
    add(){
      for( let key in this.form ){
        this.form[key]= ''
      }
      this.form.modelId= 1
      this.dialogVisible = true
    },
    //删除
    del(id){
      this.$confirm('确定删除该岗位？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.delRole(id).then(res => {
          this.$message.success('删除成功')
          this.refreshTableData();
        })
      })
    },
    edit(id){
      this.editId = id
      this.$api.getRoleMenu(id).then(res => {
        this.dialogMenuVisible = true
        this.checkedKeys = res.data
        this.$nextTick(() => {
          this.$refs.tree.setCheckedKeys(res.data)
          this.changeTreeClass()
        })
      })
    },
    //提交
    submitForm(){
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          this.btnLoading = true
          let data = JSON.parse(JSON.stringify(this.form))
          this.$api.addRole(data).then(res => {
            if(res.code == 0){
              this.$message.success('操作成功')
              this.refreshTableData();
              this.dialogVisible = false
            }else{
              this.$message.error(res.msg)
            }
            this.btnLoading = false
          }).catch(()=>{this.btnLoading = false})
        }
      })
    },
    getNode(data,list){
      this.checkedKeys = list.checkedKeys
    },
    submitRoleMenu(){
      this.btnLoading = true
      this.$api.setRole({
        menuIds:this.checkedKeys.toString(),
        roleId:this.editId
      }).then(res => {
        if(res.code == 0){
          this.$message.success('操作成功')
          this.dialogMenuVisible = false
        }else{
          this.$message.error(res.msg)
        }
        this.btnLoading = false
      }).catch(()=>{this.btnLoading = false})
    }
  },
};
</script>

<style lang="scss" scoped>

.option-wrapper { padding: 0 !important; }
.wrapper{
  display: flex;
  .org-list{
    width: 280px;
    margin-right: 20px;
    background: #fff;
    .bd{
      padding:10px;
      height: calc(100vh - 166px);
      box-sizing: border-box;
      overflow-y: auto;
    }
  }
}
.table-box{
  flex: 1;
  padding:20px;
  background: #fff;
  overflow-x: auto;
}
.topsearch{
  display: flex;
  align-items: center;
  justify-content: space-between;
  .btns{
    display: flex;
    align-items: center;
  }
  .search-inp{
    width: 240px;
    margin-right: 20px;
  }
}
::v-deep .add-form{
  .el-input{
    width: 400px !important;
  }
}
::v-deep .el-tree-node__content{
  height: 30px;
}
.custom-tree-node{
  display: flex;
  align-items: center;
  .label{
    font-size: 14px;
  }
  .btns{
    margin-left: 20px;
    font-size: 14px;
    i{
      margin-left: 10px;
    }
    .success{
      color: #409EFF;
    }
    .danger{
      color: #F56C6C;
    }
  }
}
.org-list .bd::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.8);
}

.org-list .bd::-webkit-scrollbar{
  width: 5px;
  background-color: rgba(0, 0, 0, 0);
}

.org-list .bd::-webkit-scrollbar-thumb{
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .3);
  background-color: #555;
}

::v-deep .el-tree-node__children{
  display: flex;
  align-items: center;
}
</style>